import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import {connect} from 'react-redux';
import I18n from 'react-native-i18n';
import BaseComponent from '../base/BaseComponent';
import {LinearButton} from '../../components/Button';
import {updateUser} from '../../api/user';
import StorageManager, {USER_INFO} from '../../storage';
import {updateUserInfo} from '../../redux/action';
import * as ImagePicker from 'react-native-image-picker';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#160231',
  },
  infoForm: {
    textAlign: 'center',
    flexDirection: 'column',
    paddingLeft: 40,
    paddingRight: 40,
  },
  username: {
    backgroundColor: '#fff',
    height: 44,
    marginBottom: 20,
    borderRadius: 22,
    paddingLeft: 22,
    paddingRight: 22,
    marginTop: 20,
  },
  bio: {
    backgroundColor: '#fff',
    marginBottom: 20,
    borderRadius: 22,
    height: 150,
    padding: 22,
    paddingTop: 22,
  },
});

class FillInformationScreen extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      nickName: '',
      identify: '',
      introduction: '',
      avatar: undefined,
    };
  }

  componentDidMount() {
    super.componentDidMount();
  }

  doNext = () => {
    console.log(this.state);
    if (
      ['nickName', 'identify', 'introduction'].some(
        (item) => this.state[item] == '',
      )
    ) {
      this._showAlert({
        content: 'Please input all user information.',
      });

      return;
    }

    this._showLoading();

    updateUser(
      {
        ...this.state,
        userToken: this.props.userInfo.token,
      },
      this.state.avatar ? [{uri: this.state.avatar, name: 'icon'}] : null,
    )
      .then(async (res) => {
        await this.props.updateUserInfo(res.data);
        this._hideLoading();
        // this.props.navigation.navigate('CreateWallet');
        this.props.navigation.navigate('Home');
      })
      .catch((err) => {
        this._hideLoading();
        this._showAlert({content: err.msg || err});
      });
  };

  renderComponent = () => {
    return (
      <View style={styles.container}>
        <ScrollView keyboardDismissMode style={styles.infoForm}>
          <Text
            style={{
              marginTop: 50,
              color: 'white',
              fontSize: 22,
              fontWeight: 'bold',
              alignSelf: 'center',
            }}>
            {I18n.t('login.improve')}
          </Text>
          <TouchableOpacity
            style={{
              marginTop: 20,
              // borderRadius: 60,
              // borderColor: '#fff',
              // borderWidth: 2,
              padding: 20,
              justifyContent: 'center',
              alignItems: 'center',
              width: 120,
              height: 120,
              alignSelf: 'center',
            }}
            onPress={() => {
              console.log('选择头像');
              ImagePicker.launchImageLibrary(
                {
                  mediaType: 'photo',
                  includeBase64: false,
                  maxHeight: 200,
                  maxWidth: 200,
                },
                (res) => {
                  console.log(res);
                  if (!res.errorCode && res.uri) {
                    this.setState({
                      avatar: res.uri,
                    });
                  }
                },
              );
            }}>
            <Image
              style={{
                // backgroundColor: 'red',
                width: 120,
                height: 120,
                borderRadius: 60,
              }}
              source={
                this.state.avatar
                  ? {uri: this.state.avatar}
                  : require('../../assets/login/default_user_icon.png')
              }
            />
          </TouchableOpacity>

          <TextInput
            style={styles.username}
            placeholder={I18n.t('login.info_name')}
            placeholderTextColor="#a1a1a1"
            onChangeText={(text) => {
              this.setState({
                nickName: text,
              });
            }}></TextInput>
          <TextInput
            style={styles.username}
            placeholder={I18n.t('login.info_id')}
            placeholderTextColor="#a1a1a1"
            keyboardType="email-address"
            onChangeText={(text) => {
              this.setState({
                identify: text,
              });
            }}></TextInput>
          <TextInput
            style={styles.bio}
            placeholder={I18n.t('login.info_bio')}
            placeholderTextColor="#a1a1a1"
            multiline
            onChangeText={(text) => {
              this.setState({
                introduction: text,
              });
            }}></TextInput>
          <LinearButton text={I18n.t('login.next')} onPress={this.doNext} />
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  updateUserInfo: (item) => dispatch(updateUserInfo(item)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FillInformationScreen);
